<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/aui_font.css">
    <link rel="stylesheet" href="../../css/news.css">
    <link rel="stylesheet" href="../../css/frame2.css">
    <link rel="stylesheet" href="../../css/swiper.css">
    <style>
        .msglist-wrap .u-wrap .list {
            border-bottom: 1px solid #fafafa;
            padding: 10px 0;
            margin: 0 10px;
        }

        .msglist-wrap .u-wrap .tx {
            overflow: visible;
        }

        .msglist-wrap .u-wrap .tx img {
            border-radius: 50%;
            width: 50px;
            height: 50px;
        }

        .msglist-wrap .u-wrap .list .name {
            font-size: 14px;
        }

        .msglist-wrap .u-wrap .msg {
            color: #999999;
        }

        .msglist-wrap .u-wrap .time {
            color: #B3B3B3;
            font-size: 10px;
        }

        /* 消息提醒数 */
        .msglist-wrap .u-wrap .list .yuan {
            position: absolute;
            right: -8px;
            top: -4px;
        }

        /* 官方 */
        .sys-tag {
            background: #7ED0AE;
            color: #fff;
            border-radius: 15px;
            font-size: 10px;
            padding: 0 5px;
        }

        .msglist-wrap .u-wrap .tx img.jiazu-tag {
            width: 60px;
            position: absolute;
            height: auto;
            bottom: 0;
        }

        /* 轮播 */
        .swiper-container {
            margin: 7px 14px;
        }

        .swiper-container img {
            width: 100%;
            border-radius: 7px;
            height: 30vw;
        }

        /* 置顶 */
        .msglist-wrap .u-wrap .top,
        .msglist-wrap .u-wrap .top .list {
            background: #f3f3f3;
        }

        .msglist-wrap .list-wrap {
            width: 100vw;
            overflow: hidden;
            box-sizing: border-box;
        }

        .msglist-wrap .u-wrap .list {
            width: 100vw;
            box-sizing: border-box;
            -webkit-transform: translateX(0px);
            transition: -webkit-transform 500ms ease-in-out;
        }

        .msglist-wrap .u-wrap .slid-left .list {
            -webkit-transform: translateX(-100px);
        }

        .slid-left .top-btn {
            -webkit-transform: translateX(calc(100vw - 100px));
        }

        .slid-left .del-btn {
            -webkit-transform: translateX(calc(100vw - 100px));
        }

        .msg-btn {
            position: absolute;
            color: #fff;
            text-align: center;

            -webkit-transform: translateX(100vw);
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: -webkit-transform 500ms ease-in-out;
        }

        .del-btn {
            width: 100px;
            background: red;
        }
        .zbList {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
        }
        .zbList .zbList-item {
          width: 50%;
          text-align: center;
          margin-bottom: 10px;
        }
        .zbList .zbList-item img {
          width: 95%;
          vertical-align: bottom;
        }
        .zbList .zbList-item .zb-name {
            width: 100%;
            padding: 0 10px;
            line-height: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            box-sizing: border-box;
            font-size: 14px;
            text-align: left;
        }
        .zbList .zbList-item .img-box {
            position: relative;
        }
        .zbList .zbList-item .room-msg {
            position: absolute;
            width: 100%;
            padding: 0 10px;
            box-sizing: border-box;
            left: 0;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
        }
        .zbList .zbList-item .room-msg div {
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="msglist-wrap" id="view">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img src="../../image/regbg.png" onerror="">
                </div>
            </div>
        </div>
        <!-- <ul class="u-wrap">
          
        </ul> -->
        <div class="zbList">
          <div class="zbList-item" @click="open">
            <div class="img-box">
                <img src="../../image/poster.png" />
                <div class="room-msg">
                    <div>name</div>
                    <div>1.0万</div>
                </div>
            </div>
            <div class="zb-name">直播直播直播直播直播直播直播直播直播直播直播直播直播</div>
          </div>
          <div class="zbList-item">
            <div class="img-box">
                <img src="../../image/poster.png" />
                <div class="room-msg">
                    <div>name</div>
                    <div>1.0万</div>
                </div>
            </div>
            <div class="zb-name">直播1</div>
          </div>
          <div class="zbList-item">
            <div class="img-box">
                <img src="../../image/poster.png" />
                <div class="room-msg">
                    <div>name</div>
                    <div>1.0万</div>
                </div>
            </div>
            <div class="zb-name">直播1</div>
          </div>
          <div class="zbList-item">
            <div class="img-box">
                <img src="../../image/poster.png" />
                <div class="room-msg">
                    <div>name</div>
                    <div>1.0万</div>
                </div>
            </div>
            <div class="zb-name">直播1</div>
          </div>
        </div>
        <div id="no_more" :class="{'null': ffList.length == 0}"></div>
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/swiper.js"></script>
<script src="../../script/limitchat.js"></script>
<script src="../../json/liao1.js"></script>
<script>
    var view = new Vue({
        el: '#view',
        data: {
          ffList: []
        },
        methods: {
            open() {
                api.openTabLayout({
                    name: 'more',
                    url:'./zb_detail.html',
                    title: '详情',
                    hideNavigationBar: true,
                });

                // _openFrame({
                //     url: 'frame6/zb_detail',
                //     title: '直播详情',
                //     id: 'zb'
                // })
            }
        }
    })
    apiready = function() {}
</script>

</html>